<template>
    <ForOneHeader :enableBack="true" />

    <!-- <u-notify ref="not" message="请输入关键词" :show="false"></u-notify> -->
    <view class="input-container">
        <u-search height="70rpx" :focus="true" :showAction="false" :clearabled="true" placeholder="请输入产品名称/型号"
            v-model="queryWrapper.keyword" @change="handleChange" @search="handleSearch"></u-search>
    </view>

    <view class="item-wrapper">
        <ItemsContainer layout="1" :status="status" @on-lower="handleOnLower" class="items-container"
            :itemList="goodList" />
    </view>


</template>
<script lang="ts" setup>
import ItemsContainer from './items-container-v2'
import { reactive, ref, nextTick } from 'vue'
import { onLoad,onReachBottom } from '@dcloudio/uni-app'
import {
    v2_pageGood
} from '@/api/search'
import * as _ from 'lodash'

onReachBottom(()=>{
    // debugger
    handleOnLower()
})


const handleChange = _.debounce(()=>{
    handleSearch()
},800)

const handleOnLower = async () => {
  // debugger
  if (queryWrapper.pageNumber >= queryWrapper.totalPage) {
    return
  }

  if (loading.value) {
    return
  }
  status.value = 'loading'

  loading.value = true
  queryWrapper.pageNumber++
  let { pageInfo, items } = await v2_pageGood(queryWrapper)
  goodList.value = goodList.value.concat(items)
  queryWrapper.totalPage = pageInfo.totalPage
  if (queryWrapper.pageNumber >= queryWrapper.totalPage) {
    debugger
    status.value = 'nomore'
  }
  nextTick(() => {
    loading.value = false
  })
}

const loading = ref(false)
const queryWrapper = reactive({
    keyword: "",
    pageNumber: 1,
    totalPage: 0,
    pageSize: 20
})
const goodList = ref([])
const status = ref('nomore')


const handleSearch = async () => {

    // if(queryWrapper.keyword.trim() == ''){
    //     show.value = true

    // not.value.show({
    //     top: 0,
    //     type: 'error',
    //     color: '#fff',
    //     message: "请输入关键词",
    //     duration: 1000 * 3,
    //     fontSize: 14,
    //     safeAreaInsetTop:true
    // })

    //     return
    // }
    if (loading.value) {
        return
    }

    loading.value = true
    queryWrapper.pageNumber = 1
    let { pageInfo, items } = await v2_pageGood(queryWrapper)
    goodList.value = items
    queryWrapper.totalPage = pageInfo.totalPage
    if (queryWrapper.pageNumber >= queryWrapper.totalPage) {
        debugger
        status.value = 'nomore'
    }else{
        status.value = 'loadmore'
    }
    nextTick(() => {
        loading.value = false

    })
}
</script>

<style scoped lang="scss">
.input-container {
    box-shadow: 0 0 10rpx #333;
    margin-bottom: 15rpx;
    background-color: #fff;
    height: 90rpx;
    display: flex;
    align-items: center;
}

.item-wrapper {
    padding: 20rpx;
}
</style>